<template>
	<div >
		<div class="mine_bj">
			<div class="mine_touxiang">
				<img :src="data.headimg" />
			</div>
			<div class="mine_nicheng">{{data.nickname}}</div>
			<div class="mine_you_yqm">
				<img style="float: left;margin-top: 5px;" src="static/jifen.png"/>
				<span>总积分：{{data.jifen}}</span>
			</div>
		</div>
		<div class="mine_line"></div>
		<router-link to="/bangzhujilu">
		<div class="mine_list">
			<span class="mine_listimg">
				<img src="static/bangzhujilu.png"/>
			</span>
			
			<span class="mine_text">帮助记录</span>
			
			<span class="mine_you_img">
				<img src="static/youyou.png"/>
			</span>
		</div>
		</router-link>
		<router-link to="/wdpq">
		<div class="mine_list">
			<span class="mine_listimg">
				<img style="width: 20px;" src="static/pinqianging_select.png"/>
			</span>
			
			<span class="mine_text">我的拼抢</span>
			
			<span class="mine_you_img">
				<img src="static/youyou.png"/>
			</span>
		</div>
		</router-link>
		<router-link to="/shdz">
		<div class="mine_list">
			<span class="mine_listimg">
				<img src="static/wodeshouhuodizhi.png"/>
			</span>
			
			<span class="mine_text">我的收货地址</span>
			
			<span class="mine_you_img">
				<img src="static/youyou.png"/>
			</span>
		</div>
		</router-link>
		<loading :show="show1" :text="text1"></loading>
	</div>
</template>

<script>
	import axios from 'axios'
	import { mapState, mapActions } from 'vuex'
	export default {
	  components: {
	  	mapState,
	  	mapActions
	  },
	  data(){
	  	return{
	  		show1:false,
	  		text1:'loading...',
	  		data:'',
	  	}
	  },
	  created(){
	  	this.show1 = true;
	  	axios.post(this.url + '/home/User/getUser',{openid:this.token}).then((res)=>{
	  		console.log(res);
	  		this.show1 = false;
	  		this.data = res.data;
	  	})
	  },
	  computed:{
	      ...mapState({
	          token: state => state.Token.userToken()//获取用户Token
	      }),
	  }
	}
</script>

<style>
	.jifen_img{
		width: 24px;
		height: 24px;
		
	}
	.mine_bj{
		background:url(../../static/beijingtup.png) no-repeat;
		width: 100%;
		height: 135px;
		background-size: 100%;
		position: relative;
	}
	.mine_touxiang img{
		width: 67px;
		height: 67px;
		border-radius:50%;
		/*border: 1px solid red;*/
		/*background: url(../../static/touxiang.png) no-repeat center;*/
		background-size: 67px;
		position: absolute;
		top: 47px;
		left: 19px;
	}
	.mine_nicheng{
		position: absolute;
		top: 69px;
		left: 90px;
		color: #fff;
		font-size: 14px;
		background-color: rgba(0,0,0,0);
	}
	.mine_you_yqm{
		height: 34px;
		font-size: 12px;
		color: #fff;
		border-radius: 17px 0 0 17px;
		text-align: center;
		line-height: 33px;
		background-color:#4CD964;
		letter-spacing: 1px;
		position: absolute;
		right: 0;
		top: 63px;
	}
	.mine_line{
		width: 100%;
		height: 10px;
		background-color: #EEEEEE;
	}
	.mine_list{
		width: 100%;
		height: 44px;
		border-bottom: 1px solid #CECECE;
		padding: 0 16px;
		background: #FFFFFF;
	}
	.mine_listimg{
		float: left;
		margin-top: 12px;
	}
	.mine_text{
		float: left;
		font-size: 14px;
		color: #333333;
		line-height: 43px;
		/*font-family: PingFang-SC;*/
		margin-left: 10px;
		letter-spacing: 1px;
	}
	.mine_you_img{
		float: right;
		width: 12px;
		margin-top: 17px;
	}
	.mine_you_img img{
		width: 100%;
		display: block;
	}
</style>